<template>
  <card-modal :visible="visible" @close="close" :title="title" transition="zoom">
    <div class="content has-text-centered">
      <article class="is-primary box">
        <p class="title">{{info.name}}</p>
        <label class="label">If there is no name, please fill in (separated by comma)</label>
        <div class="control is-grouped">
          <p class="control is-expanded">
            <input class="input" v-bind:disabled="!isNamesExists" type="text" placeholder="Names">
          </p>
          <p class="control">
            <vb-switch type="success" :checked="isNamesExists" v-model="isNamesExists"></vb-switch>
          </p>
        </div>
      </article>
    </div>
  </card-modal>
</template>

<script>
import { CardModal } from 'vue-bulma-modal'
import VbSwitch from 'vue-bulma-switch'
export default {
  components: {
    CardModal,
    VbSwitch
  },

  props: {
    visible: Boolean,
    title: String,
    url: String,
    info: Object
  },

  data () {
    return {
      isNamesExists: false,
      src: require('assets/logo.svg')
    }
  },

  methods: {
    open (url) {
      window.open(url)
    },

    close () {
      this.$emit('close')
    }
  },
  computed: {
    switchStat () {
      return this.isNamesExists ? 'On' : 'Off'
    }
  }
}
</script>
